<template>
  <div class="execute">
    <div class="execute_content">
      <my-header class="page_header" ref="header" :isBack="true" :backText="backText" :is_Level_three_page="true" :maxLevelThreePage="show_select_person || isFromOverTimePage ? true : false" :hadInput="false" @backFn="back"></my-header>
      <me-scroll class="meScroll execute_box" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
        <p class="execute_title">基本信息</p>
        <div class="execute_device_info">
          <ul>
            <li>
              <p style="font-size: 18px;">
                巡检对象: <span class="value" style="font-size: 18px;">{{ deviceInfo.departmentName }}<span v-if="deviceInfo.deviceName">/</span>{{ deviceInfo.deviceName }}<span v-if="deviceInfo.componentName">/</span>{{ deviceInfo.componentName }}</span>
              </p>
            </li>
            <li>
              <p>
                巡检类型: <span class="value">{{ deviceInfo.checkType === 1 ? '部门' : deviceInfo.checkType === 2 ? '设备' : deviceInfo.checkType === 3 ? '部件' : '-' }}</span>
              </p>
            </li>
            <li>
              <p>
                负&nbsp;&nbsp;责&nbsp;&nbsp;人:
                <span class="value">
                  <!-- <span class="person" v-for="(items,index) in deviceInfo.leaderList" :key="index" ><span v-if="index!==0">,</span>{{items.name}}</span> -->
                  <span class="person">{{ deviceInfo.leaderList && deviceInfo.leaderList.length > 0 && deviceInfo.leaderList[0].name }}</span>
                  <span class="dot" v-if="deviceInfo.leaderList && deviceInfo.leaderList.length > 1" @click="handleOperator(deviceInfo.leaderList)">...</span>
                </span>
              </p>
            </li>
            <li>
              <p>
                时间范围: <span class="value" v-if="deviceInfo.startTime && deviceInfo.endTime">{{ deviceInfo.startTime | formaDateH }}点&nbsp;-&nbsp;{{ deviceInfo.endTime | formaDateH }}点</span>
              </p>
            </li>
            <li>
              <p>
                执行标准: <span class="value">{{ deviceInfo.checkContent }}</span>
              </p>
            </li>
            <li>
              <p>
                状&emsp;&emsp;态: <span class="value" v-if="Object.keys(deviceInfo).length !== 0">{{ switchStatus(deviceInfo.checkSubmitTime, deviceInfo.startTime, deviceInfo.endTime) }}</span>
              </p>
            </li>
          </ul>
        </div>
        <!--checkSubmitTime为null||startTime早于现在时间，显示提交工单-->
        <div v-if="(!deviceInfo.checkSubmitTime || openStartTime(deviceInfo.startTime)) && hasAuth(deviceInfo.checkLeaderIds)">
          <!-- <div v-if="(!deviceInfo.checkSubmitTime||openStartTime(deviceInfo.startTime))"> -->
          <p class="execute_title">填写结果</p>
          <div class="select_result">
            <p class="action">
              点巡检结果 <span class="right" @click="selectHandler">{{ selectResult }} <iconSvg name="downFill" w="34px" h="17px" class="right_icon" ref="selece_icon"></iconSvg></span>
            </p>
            <transition name="slide">
              <div class="select_box" v-if="showSelect">
                <my-select :options="selectOptions" @changeIsSelect="changeIsSelect"></my-select>
              </div>
            </transition>
          </div>
          <textarea v-model="description" class="executeTextAret" @focus="checkTextAreafocus" @blur="recovery" :placeholder="isCheckTextAreafocus ? '' : '请输入点巡检标准' + checkPlaceholder"></textarea>
          <div class="upload_imglist_box">
            <div class="upload_action" v-if="imgList.length < 4">
              <iconSvg name="upload" w="30px" h="30px" class="upload_icon"></iconSvg>
              <p class="text">设备拍照</p>
              <up-load @model="onChange"></up-load>
            </div>
            <ul v-if="imgList.length > 0" class="preview_box">
              <li v-for="(item, index) in imgList" :key="index">
                <span class="delect_icon" data-tools="+" @click="delectImg(index)">+</span>
                <img :src="item" @click="show(index)" class="previewer-demo-img" />
              </li>
              <div v-transfer-dom>
                <previewer :list="preImgList" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
              </div>
            </ul>
          </div>
          <div class="is_inform_box">
            <group>
              <x-switch v-model="isInform" title="是否上报工单"></x-switch>
              <cell v-if="isInform" calss="myBgc" title="选择负责人" :value="chooseChecker" @click.native="selectPersonFn" is-link></cell>
              <div class="sheettype_box" v-if="isInform">
                <cell calss="myBgc" title="选择优先级" :value="sheetTypeSelectResult" @click.native="sheetTypeSelectHandler" is-link></cell>
                <transition name="slide">
                  <div class="select_box" v-if="showSheettypeSelect">
                    <my-select :options="sheetTypeSelectOptions" @changeIsSelect="changeSheetTypeIsSelect"></my-select>
                  </div>
                </transition>
              </div>
            </group>
            <!-- <textarea v-if="isInform" class="executeTextAret mart10" @focus="worksheetTextAreafocus" @blur="recovery" v-model="sheetDescribe" :placeholder="isWorksheetTextAreafocus?'':'请输入工单描述（必填项）'"></textarea> -->
            <p></p>
          </div>

          <button class="submit" @click="submit" v-if="isOperability">确认</button>
          <transition name="slideLong">
            <div class="select_person_box" :style="{ top: headerHeight + 'px' }" v-show="show_select_person">
              <div v-if="isRefreshselPerCom">
                <select-person :offsetTop="headerHeight" :propsLeader="leader" selectTitle="选择负责人" :defDepartmentId="deviceInfo.departmentId" @changeId="change" @closeSelectPersonFn="closeSelectPersonFn"></select-person>
              </div>
            </div>
          </transition>
        </div>
        <div class="time_info" v-else>
          <p class="time">
            {{ remainTime > 0 ? '剩余时间' : '逾期时间' }}：<span class="val">{{ remainTime | plusTimeStamp }}</span>
          </p>
        </div>
      </me-scroll>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="popupShow" class="operator-dialog-check" hide-on-blur :dialog-style="{ 'max-width': '100%', padding: '20px', 'background-color': '#ffffff!important' }">
        <div class="main" style=" text-align: left;margin-bottom: 20px;font-size: 14px;">操作人：{{ popupContent }}</div>
        <x-button plain @click.native="popupShow = false">关闭</x-button>
      </x-dialog>
    </div>
    <confirm v-model="isNotify" title="操作提醒" @on-confirm="onConfirm">
      <p style="text-align:center;">该部件已过质保期，确定提交吗？</p>
    </confirm>
  </div>
</template>

<script>
import myHeader from '@/components/common/header';
import upLoad from '@/components/common/upload';
import mySelect from '@/components/common/select/index';
import selectPerson from '@/components/common/select/selectPerson';
import MeScroll from 'mescroll.js/mescroll.vue';
import { Confirm, Group, XSwitch, Cell, Previewer, TransferDom, XDialog, XButton } from 'vux';
import qs from 'qs';
import SpotCheckDao from '../../daos/spotCheckDao';

export default {
  directives: {
    TransferDom,
  },
  components: {
    myHeader,
    upLoad,
    Group,
    XSwitch,
    Cell,
    mySelect,
    selectPerson,
    MeScroll,
    Previewer,
    XDialog,
    XButton,
    Confirm,
  },
  data() {
    return {
      isNotify: false,
      checkId: '',
      deviceId: '',
      componentId: '',
      departmentId: '',
      sheetType: 1, // 工单类型： 1点巡检工单  2.更换工单
      type: null, // 类型：1设备  2.部件  3.部门
      userId: '',
      leader: '',
      chooseChecker: '',
      deviceInfo: {},
      componentInfo: {},
      status: '',
      headerHeight: 0,
      imgList: [],
      isInform: false,
      checkPlaceholder: '（非必填项）',
      showSelect: false,
      showSheettypeSelect: false,
      backText: '执行',
      selectResult: '正常',
      selectResultVal: 1,
      sheetTypeSelectResult: '一般',
      sheetTypeSelectResultVal: 1,
      sheetDescribe: '',
      description: '',
      selectOptions: [
        {
          name: '正常',
          value: 1,
          selected: true,
        },
        {
          name: '轻度故障',
          value: 2,
          selected: false,
        },
        {
          name: '中度故障',
          value: 3,
          selected: false,
        },
        {
          name: '重度故障',
          value: 4,
          selected: false,
        },
      ],
      sheetTypeSelectOptions: [
        {
          name: '一般',
          value: 1,
          selected: true,
        },
        {
          name: '重要',
          value: 2,
          selected: false,
        },
        {
          name: '紧急',
          value: 3,
          selected: false,
        },
      ],
      show_select_person: false,
      isRefreshselPerCom: false,
      isWorksheetTextAreafocus: false,
      isCheckTextAreafocus: false,
      scrollTop: 0,
      isFromOverTimePage: false,
      isOperability: true,
      isMessageEnter: false,
      backTwoLevel: false,
      mescrollDown: {
        use: false,
      },
      mescrollUp: {
        use: true,
        isLock: true,
        onScroll: this.scrollFn,
      },
      user: JSON.parse(localStorage.getItem('user')),
      remainTime: '',
      userId: '',
      options: {
        getThumbBoundsFn(index) {
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index];
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
          let rect = thumbnail.getBoundingClientRect();
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
        },
      },
      preImgList: [],
      popupShow: false,
      popupContent: '',
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path == '/operaionManage/spotCheck/overdue') {
        vm.isFromOverTimePage = true;
      } else {
        vm.isFromOverTimePage = false;
      }

      if (from.path == '/operaionManage/spotCheck/workSheetDetail') {
        vm.backTwoLevel = true;
      } else {
        vm.backTwoLevel = false;
      }
    });
  },
  watch: {
    selectResult: {
      handler() {
        if (this.selectResult !== '正常') {
          this.isInform = true;
          this.checkPlaceholder = '（必填项）';
        } else {
          this.isInform = false;
          this.checkPlaceholder = '（非必填项）';
        }
      },
    },
    showSelect: {
      handler() {
        if (!this.showSelect) {
          this.$refs.selece_icon.$el.style.transform = 'rotate(0deg)';
        } else {
          this.$refs.selece_icon.$el.style.transform = 'rotate(-180deg)';
        }
      },
    },
    show_select_person: {
      handler() {
        if (this.show_select_person) {
          this.backText = '点巡检执行';
        } else {
          this.backText = '执行';
        }
      },
    },
  },
  created() {
    this.$http(this.$API.getUserInfo, {}, true).then((res) => {
      this.userId = res.id;
    });
  },
  mounted() {
    this.headerHeight = this.$refs.header.$el.offsetHeight;
    this.initParams();
    this.getChargeInfo();
    this.getDetail();
  },
  methods: {
    onConfirm() {
      this.deviceInfo.isOverDue = false;
      this.submit();
    },
    openStartTime(time) {
      let date = Date.parse(new Date());
      if (date < time) {
        return true;
      } else {
        return false;
      }
    },
    getDetail() {
      this.$httpGet(this.$API.getcheckTaskdetail, { id: this.checkId }, true).then((res) => {
        this.deviceInfo = res;
        let currentTime = new Date().getTime();
        this.remainTime = parseInt((res.endTime - currentTime) / 1000 / 60);
        let startTime = res.startTime;
        let endTime = res.endTime;
        if (currentTime < startTime) {
          this.$vux.toast.text('待执行中，界面不可操作', 'bottom');
          this.isOperability = false;
        } else {
          this.isOperability = true;
        }
        if (res.checkSubmitTime) {
          let host = window.location.protocol + '//' + window.location.host;
          let domain = `${host}/#/operaionManage/spotCheck/workSheetDetail?id=${res.id}&cate=${this.type == 1 ? 'componentRecord' : this.type == 2 ? 'deviceRecord' : this.type == 3 ? 'componentRecord' : ''}`;
          window.location.replace(domain);
        }
      });
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    scrollFn(mescroll, y, isUp) {
      this.scrollTop = parseFloat(y);
    },
    checkTextAreafocus() {
      this.isCheckTextAreafocus = true;
      //document.getElementsByTagName('html')[0].scrollTo(0, 0);
    },
    worksheetTextAreafocus() {
      this.isWorksheetTextAreafocus = true;

      // 反人类的交互需求
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      setTimeout(() => {
        if (isAndroid) {
          this.mescroll.scrollTo(this.scrollTop, 0);
        } else if (isiOS) {
          this.mescroll.scrollTo(this.scrollTop - 160, 0);
        }
      }, 20);
    },
    recovery() {
      window.scroll(0, 0);
      this.isCheckTextAreafocus = false;
      this.isWorksheetTextAreafocus = false;
    },
    change(id, name) {
      this.leader = id;
      this.chooseChecker = name;
    },
    selectPersonFn() {
      this.showSelect = false;
      this.showSheettypeSelect = false;
      this.show_select_person = true;
      this.isRefreshselPerCom = true;
    },
    closeSelectPersonFn() {
      this.show_select_person = false;
    },
    initParams() {
      let params = this.$route.query;
      this.checkId = params.id;
      this.deviceId = params.deviceId;
      this.componentId = params.componentId;
      this.departmentId = params.departmentId;
      this.sheetType = params.sheetType;
      this.type = parseInt(params.type);
      this.isMessageEnter = JSON.parse(params.isMessageEnter ? params.isMessageEnter : 'false');
    },
    switchDetectionUrl(type) {
      switch (type) {
        case 2:
          return this.$API.deviceCheckRecordById;
          break;
        case 3:
          return this.$API.componentCheckRecordById;
          break;

        default:
          return this.$API.deviceCheckRecordById;
          break;
      }
    },
    submit() {
      if (this.deviceInfo.isOverDue === true) {
        this.isNotify = true;
        return;
      }

      if (this.selectResult !== '正常') {
        if (this.description.length == 0) {
          this.$vux.toast.text('请填写点巡检标准', 'bottom');
          return false;
        }
      }
      if (this.imgList.length === 0) {
        if (this.deviceInfo.talkPhotoStatus === 1) {
          this.$vux.toast.text('请上传图片', 'bottom');
          return false;
        } else if (this.type === 2) {
          this.$vux.toast.text('请上传图片', 'bottom');
          return false;
        } else if (this.selectResultVal !== 1) {
          this.$vux.toast.text('请上传图片', 'bottom');
          return false;
        }
      }
      if (this.isInform) {
        if (!this.leader) {
          this.$vux.toast.text('请选择负责人', 'bottom');
          return false;
        }
        // if (this.sheetDescribe.length == 0) {
        //     this.$vux.toast.text('请填写工单描述', 'bottom')
        //     return false
        // }
      }
      let obj = {
        deviceId: this.type === 1 ? null : this.deviceId,
        id: this.checkId,
        checkSubmitContent: this.description,
        urls: this.imgList,
        checkResult: this.selectResultVal,
        departmentId: this.departmentId,
        leaderId: this.isInform ? this.leader : '', // 不上报时置空
        // sheetType: this.sheetType, // 工单类型： 1点巡检工单  2.更换工单
        description: this.description,
        workSheetPriority: this.sheetTypeSelectResultVal,
        componentId: this.type === 3 ? this.componentId : null,
      };
      SpotCheckDao.postDivceCheckSubmit(obj, (res) => {
        // })
        // this.$http(this.$API.getcheckTaskSubmit, obj, true).then((res) => {
        // if (res) {
        this.$vux.toast.text('完成任务，为你跳转页面', 'bottom');
        if (this.isMessageEnter) {
          // let host = window.location.protocol+"//"+window.location.host;
          // window.location.href = host + '/#/operaionManage'
          // this.$router.go(-2);
          this.$router.replace({
            name: `operaionManage`,
          });
        } else {
          if (this.backTwoLevel) {
            setTimeout(() => {
              this.$router.go(-2);
            }, 1500);
          } else {
            setTimeout(() => {
              this.$router.replace({
                name: `deviceCheckOverViewPage`,
                query: {
                  deviceId: this.deviceInfo.deviceId,
                  deviceName: this.deviceInfo.deviceName,
                  departmentId: this.deviceInfo.departmentId,
                  departmentName: this.deviceInfo.departmentName,
                  type: '设备',
                },
              });
            }, 1500);
          }
        }

        // }
      });
    },
    changeIsSelect(index) {
      if (!this.selectOptions[index].selected) {
        this.selectOptions.map((item) => {
          item.selected = false;
        });
        this.selectOptions[index].selected = true;
        this.selectResult = this.selectOptions[index].name;
        this.selectResultVal = this.selectOptions[index].value;
        if (index == 0 || index == 1) {
          //联动下面的工单类型
          this.changeSheetTypeIsSelect(0);
        }
        if (index == 2) {
          //联动下面的工单类型
          this.changeSheetTypeIsSelect(1);
        }
        if (index == 3) {
          //联动下面的工单类型
          this.changeSheetTypeIsSelect(2);
        }
        this.showSelect = false;
      }
    },
    changeSheetTypeIsSelect(index) {
      if (!this.sheetTypeSelectOptions[index].selected) {
        this.sheetTypeSelectOptions.map((item) => {
          item.selected = false;
        });
        this.sheetTypeSelectOptions[index].selected = true;
        this.sheetTypeSelectResult = this.sheetTypeSelectOptions[index].name;
        this.sheetTypeSelectResultVal = this.sheetTypeSelectOptions[index].value;
        this.showSheettypeSelect = false;
      }
    },
    selectHandler() {
      this.showSelect = !this.showSelect;
    },
    sheetTypeSelectHandler() {
      this.showSheettypeSelect = !this.showSheettypeSelect;
    },
    back() {
      if (this.show_select_person) {
        this.show_select_person = false;
        this.isRefreshselPerCom = false;
      } else {
        if (this.isMessageEnter) {
          // let host = window.location.protocol+"//"+window.location.host;
          // window.location.href = host + '/#/operaionManage'
          this.$router.replace({
            name: `operaionManage`,
          });
          // this.$router.go(-2);
        } else {
          this.$router.go(-1);
        }
      }
    },
    onChange: function(fileUrl) {
      this.uploadImg(fileUrl);
    },
    // 获取负责人（默认负责人）
    getChargeInfo: function() {
      this.$http(this.$API.getUserInfo, true).then((res) => {
        if (res) {
          this.userId = res.id;
          this.$http(this.$API.getDepartmentCharger, { departmentId: res.department.id }, true).then((res) => {
            if (res.users.length > 0) {
              for (var item of res.users) {
                if (item.leader === 1) {
                  this.leader = item.id;
                  this.chooseChecker = item.name;
                  break;
                }
              }
            }
            if (this.leader == this.userId) {
              //  负责人是自己时无默认值
              this.leader = '';
              this.chooseChecker = '';
            }
          });
        }
      });
    },
    // 获取负责人（选择负责人）
    getSelectCharge() {
      this.$http(this.$API.listDepartmentUser, { nameOrAccount: '', departmentId: -1 }, true).then((data) => {
        // this.treeData = data[0]
      });
    },
    //上传图片
    uploadImg: function(fileUrl) {
      let that = this;
      let config = {
        withCredentials: true,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
      };
      const options = {
        file: fileUrl,
      };
      this.loading = true;
      this.$axios
        .post(this.$API.upload, qs.stringify(options), config)
        .then((res) => {
          if (res.data.success) {
            this.imgList.unshift(res.data.data);
            this.preImgList.unshift({
              src: res.data.data,
              msrc: res.data.data,
            });
            this.loading = false;
          } else {
            this.loading = false;
            this.uploadFalse = true;
          }
        })
        .catch(() => {
          this.$commom.warning('图片上传失败，请重新选择');
          this.loading = false;
          this.uploadFalse = true;
        });
    },
    //删除图片
    delectImg: function(index) {
      this.imgList.splice(index, 1);
      this.preImgList.splice(index, 1);
    },
    switchStatus(operatorTime, startTime, endTime) {
      let currentTime = new Date().getTime();
      if (operatorTime) {
        this.hasExecute = true;
        this.isExecute = true;
        if (operatorTime > endTime) {
          return '逾期执行';
        } else {
          return '已执行';
        }
      } else {
        this.hasExecute = false;
        this.isExecute = false;
        if (currentTime < startTime) {
          this.waitExecute = true;
          return '待执行';
        } else if (currentTime > startTime && currentTime < endTime) {
          //判断是否是自己的任务
          if (this.hasAuth(this.deviceInfo.checkLeaderIds)) {
            return '可执行';
          } else {
            return '执行中';
          }
        } else if (currentTime > endTime) {
          this.overdueExecute = true;
          if (this.hasAuth(this.deviceInfo.checkLeaderIds)) {
            return '逾期执行';
          } else {
            return '已逾期';
          }
        }
      }
    },
    //判断权限
    hasAuth(checkLeaderIds) {
      if (checkLeaderIds) {
        return checkLeaderIds.split(',').includes(this.userId);
      }
    },
    logIndexChange(arg) {},
    show(index) {
      this.$refs.previewer.show(index);
    },
    handleOperator(data) {
      this.popupShow = true;
      let arr = [];
      data.forEach((item) => {
        arr.push(item.name);
      });
      this.popupContent = arr.join(',');
    },
  },
};
</script>

<style lang="less" scoped>
.execute {
  background: #22233f;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  .select_person_box {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 4999;
  }
  .page_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
  }
  .execute_box {
    position: fixed;
    padding: 0 16px 22px;
    top: 45px;
    height: auto;
    bottom: 0;
    box-sizing: border-box;
    .execute_title {
      font-size: 24px;
      color: #fff;
      padding: 20px 0 12px;
    }
    .executeTextAret {
      display: block;
      width: 100%;
      height: 116px;
      background: #292a4d;
      border: none;
      border-radius: 4px;
      padding: 8px;
      box-sizing: border-box;
      color: #fff;
      font-size: 15px;
      &::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 15px !important;
        line-height: 21px !important;
      }
    }
    .execute_device_info {
      background: #292a4d;
      ul {
        padding: 14px 8px;
        li {
          p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 15px;
            line-height: 21px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .value {
              color: #fff;
              margin-left: 15px;
              .person {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .dot {
                color: #456de6;
                margin-left: 4px;
              }
            }
          }
          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
      }
    }
    .time_info {
      background: #292a4d;
      padding: 14px 8px;
      margin-top: 10px;
      .time {
        font-size: 17px;
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
        .val {
          color: #fff;
        }
      }
    }
    .select_result {
      position: relative;
      margin-bottom: 12px;
      .action {
        font-size: 15px;
        line-height: 21px;
        padding: 11px 8px;
        background: #292a4d;
        border-radius: 2px;
        color: rgba(255, 255, 255, 0.6);
        .right {
          float: right;
          color: #fff;
          .right_icon {
            color: #fff;
            transition: transform 0.3s ease-in-out;
          }
        }
      }
      .select_box {
        position: absolute;
        width: 100%;
        height: 139px;
        left: 0;
        bottom: -143px;
        background: rgba(232, 233, 237, 0.9);
        border-radius: 4px;
        z-index: 9999;
      }
    }
    .upload_imglist_box {
      overflow: hidden;
      padding-top: 19px;
      display: flex;
      .upload_action {
        position: relative;
        width: 64px;
        height: 64px;
        background: #292a4d;
        border-radius: 2px;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        .upload_icon {
          color: rgba(255, 255, 255, 0.6);
          margin: 10px 0 2px;
        }
        .text {
          font-size: 12px;
        }
      }
      .preview_box {
        flex: 1;
        display: flex;
        li {
          position: relative;
          width: 64px;
          height: 64px;
          margin: 0 9px;
          .delect_icon {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%) rotate(45deg);
            width: 16px;
            height: 16px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 16px;
            border-radius: 50%;
            background: #4570c6;
            pointer-events: auto;
          }
        }
      }
    }
    .is_inform_box {
      .sheettype_box {
        position: relative;
        .select_box {
          position: absolute;
          width: 100%;
          height: 100px;
          left: 0;
          bottom: -110px;
          background: rgba(232, 233, 237, 0.9);
          border-radius: 4px;
          z-index: 9999;
        }
      }
    }
    .submit {
      display: block;
      width: 100%;
      margin-top: 20px;
      border: none;
      outline: none;
      background: #456de6;
      font-size: 17px;
      color: #fff;
      line-height: 24px;
      padding: 10px 0 10px;
      text-align: center;
      border-radius: 4px;
    }
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.2s ease-in-out;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(-44px);
  opacity: 0;
}
.slideLong-enter-active,
.slideLong-leave-active {
  transition: all 0.5s ease-in-out;
}
.slideLong-enter,
.slideLong-leave-to {
  transform: translateY(-800px);
  opacity: 0;
}
</style>

<style lang="less">
.is_inform_box {
  .weui-cells {
    font-size: 15px;
    overflow: unset;
    &::before {
      content: unset;
    }
    &::after {
      content: unset;
    }
    background-color: transparent;
  }
  .vux-x-switch.weui-cell_switch {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .vux-tap-active:active {
    background: transparent;
  }
  .weui-cell_switch {
    &::before {
      content: unset;
    }
    &::after {
      content: unset;
    }
    .weui-label {
      font-size: 15px;
      color: #fff;
    }
    .weui-switch,
    .weui-switch-cp__box {
      width: 50px; /* no */
      height: 23px; /* no */
      font-size: 0;
    }
    .weui-switch:checked,
    .weui-switch-cp__input:checked ~ .weui-switch-cp__box {
      background-color: #456de6;
      border-color: #456de6;
    }
    .weui-switch:before,
    .weui-switch-cp__box:before {
      width: 22px; /* no */
      height: 22px; /* no */
    }
    .weui-switch:after,
    .weui-switch-cp__box:after {
      width: 22px; /* no */
      height: 22px; /* no */
    }
    .weui-switch:checked:after,
    .weui-switch-cp__input:checked ~ .weui-switch-cp__box:after {
      transform: translateX(27px);
    }
  }
  .vux-no-group-title {
    margin-top: 20px;
  }
  .weui-cell_access {
    color: rgba(255, 255, 255, 0.6);
    &::before {
      content: unset;
    }
    background-color: #292a4d;
    border-radius: 2px;
    margin-top: 10px;
    .weui-cell__ft {
      color: #fff;
    }
  }
  .mart10 {
    margin-top: 10px;
  }
}
</style>
